
<template>
    <div class="ingr-admet-comp" ref="admet">
         <TitleBox>
            <template #titlecont>
                <span v-lang="{lang: controlSto.language, lgid: 'tttt'}">ADMET</span>
            </template>
        </TitleBox>

        <!-- <div class="condition-box">
            <div class="condition-left">
            </div>
            <div class="condition-right">
                <div class="ipt-cont">
                        <el-input class="ipt-search" v-model="condObj.searchword" autofocus :placeholder="searchPlace" />
                </div>
                <SearchBtn class="search-item" @click.stop="toSearch"/>

                <TableFilter class="search-item" :column="dataObj.columnList" :filterKey="condObj.filterKey" @onChg="chgTableCol"/>

                <SearchLoad type='tttttt' :uiCode="condObj.uiCode" />
            </div>
        </div> -->


        <!-- <div class="cont-box">
            <uiTable
                :config="dataObj.tableConfig"
                :columnConfig="dataObj.columnConfig" 
                :data="dataObj.dataList"
                :key="dataObj.searchTablevt">
            </uiTable>
            <div class="page-box">
                <uiPagination
                    :total="condObj.total" :pageSize="condObj.pageSize" :pageIndex="condObj.pageIndex"
                    @onSizeChange="chgSize" @onCurrentChange="chgCurrnt"/>
            </div>
        </div> -->
        <div class="mad-float">
            <div class="con-box" v-for="item in dataObj.dataList" :key="'conImg_' + item.id">
                <div class="con-title-box">
                    <img src="@/assets/img/ObservationIcon.png" v-if="item.id == 1" class="con-title-img" width="100%"/>
                    <img src="@/assets/img/PharmacokineticsIcon.png" v-if="item.id == 2" class="con-title-img" width="100%"/>
                    {{ item.title }}
                </div>
                <div class="con-content-box">
                    <div class="con-list-item" v-for="o in item.content" :key="'conList_' + o.id">
                        <div class="con-list-left">{{ o.uiElName }}</div>
                        <div class="con-list-right">{{ o.admetValue }}</div>
                    </div>
                </div>
            </div>
            <!-- <div class="con-box"></div> -->
        </div>
    </div>
</template>

<script setup>
    import { ref, reactive, toRefs, computed, onBeforeMount, watch } from 'vue';
    import { useIntersectionObserver } from '@vueuse/core';
    import TitleBox from '@/components/TitleBox.vue'
    import { controlStore } from '@/stores/control'
    import { getAdmetIngre, getTableThList} from '@/service/tcm.js'

    const props = defineProps({
        detailId: {
            type: [Number, String],
            default: ''
        }
    })
    const { detailId } = toRefs(props);
    const admet = ref(null);
    const controlSto = controlStore();
    const condObj = reactive({
        uiCode: 'ingredient_admet',
    })
    const dataObj = reactive({
        tdList: [],
        dataList: [
            {
                title: 'Obervation',
                timg: '',
                id: 1,
                content: []
            },
            {
                title: 'Pharmacokinetics',
                timg: '',
                id: 2,
                content: []
            }
        ]
    })

const togetAdmetIngre = () => {
    getAdmetIngre({
        ingrId: detailId.value,
        langCode: controlSto.language == 1 ? 'ENG' : 'CHN',
        uiTypeCode: condObj.uiCode
    }).then(res => {
        if (res.success) {
            if (res.data) {
                // dataObj.tdList = res.data
                let arrLf = [], arrRt = [];
                dataObj.tdList.forEach(e => {
                    e.admetValue = res.data[e.uiElCode];
                    res.data.forEach(o => {
                        if(o.uiElName == e.uiElCode) {
                            e.admetValue = o.uiElValue;
                        }
                    })
                    if (e.uiElSort < 15) {
                        arrRt.push(e)
                    } else {
                        arrLf.push(e)
                    }
                })
                dataObj.dataList[0].content = [...arrLf];
                dataObj.dataList[1].content = [...arrRt];
            }
        }
    })
}

const getTableTh = () => {
        let params = {
            uiCode: condObj.uiCode,
            langCode: controlSto.language == 1 ? 'ENG' : 'CHN'
        };
        
        getTableThList(params).then((res) => {
            if (res.success && res.data) {
                dataObj.tdList = res.data
                togetAdmetIngre();
            }
        }).catch(() => {});
    };
onBeforeMount(() => {
    
    // togetAdmetIngre();
    const {stop} = useIntersectionObserver(
            admet,
            ([{ isIntersecting }], observerElement) => {
                if (isIntersecting) {
                    // 停止监听，如果你只想知道一次可视性变化
                    getTableTh();
                    //阻止再次请求
                    stop()
                }
            },
            {
                threshold: 0, // 当交叉框达到视窗的这部分时触发
            }
        );
})
watch(() => controlSto.language, (n, v) => {
    // togetAdmetIngre();
    if(n != v && v) {
        getTableTh();
    }
})
</script>


<style lang="scss" scoped>
    .ingr-admet-comp {
        .mad-float {
            display: flex;
            justify-content: space-between;
            padding: 24px 0 32px;
            .con-box {
                border: 1px solid #E6C896;
                width: 48%;
                height: 275px;
                border-radius: 8px 8px;
                .con-title-box {
                    height: 80px;
                    background: rgba(188, 159, 119, 0.1);
                    border-bottom: 1px solid #E6C896;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 600;
                    font-size: 22px;
                    color: #333333;
                    line-height: 30px;
                    text-align: left;
                    font-style: normal;
                    line-height: 80px;
                    .con-title-img {
                        width: 40px;
                        height: 40px;
                        margin-left: 32px;
                        vertical-align: text-bottom;
                    }
                }
                .con-content-box {
                    padding: 16px 32px;
                    .con-list-item {
                        display: flex;
                        justify-content: space-between;
                        line-height: 36px;
                        .con-list-left {
                            font-size: 16px;
                            font-weight: 400;
                        }
                        .con-list-right {
                            font-weight: 600;
                            font-size: 16px;
                            color: #333333;
                        }
                    }
                }
            }
        }
    }
</style>
